<template>
  <div class="login-container">
    <star-canvas></star-canvas>
    <div class="login-form">
      <h2>登录</h2>

      <el-form :model="loginForm" label-width="40px">
        <el-form-item label="账号">
          <el-input v-model="loginForm.account" placeholder="请输入用户名或邮箱" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
          <el-button type="primary" @click="submitLoginForm">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { req_login } from '/src/api'
import {dict2ElMessage, response2ElMessage} from '/src/utils/response-utils'
import StarCanvas from "../home-views/components/StarCanvas.vue";

export default {
  name: 'LoginView',
  components: {StarCanvas},
  props: {

  },
  data() {
    return {
      loginForm: {
        account: "",
        password: ""
      }
    }
  },
  methods: {
    async submitLoginForm() {
      // 前端检验
      if (this.loginForm.account === '') {
        ElMessage.info("请输入账号！")
        return
      }
      if (this.loginForm.password === '') {
        ElMessage.info("请输入密码！")
        return
      }

      // 发送请求
      let response = await req_login(this.loginForm.account, this.loginForm.password)
      let data = response.data
      let user = data['user']
      console.log(response)

      // 更新全局状态
      if (data['errno'] === 1) {
        this.$store.commit('setUser', {
              user_name: user['user_name'],
              email: user['email'],
              introduction: user['introduction'],
              scholar_id: user['scholar_id'],
              user_type: user['user_type'],
              user_id: user['user_id'],
              scholar_name: user['scholar_name'],
        })
        this.$store.state.hasLogin = true;
        
        // 回应
        dict2ElMessage(response, {
          "showElMsg": true,
          "msg": "你好，" + user['user_name'] + "！",
          "msgType": "success",
          "outputToConsole": false
        })

        // 跳转
        this.$router.push({
          path: '/'
        })
      }
      else {
        // 回应
        response2ElMessage(response, {
          1003: {
            "showElMsg": true,
            "msg": "当前已登录！",
            "msgType": "warning",
            "outputToConsole": false
          }
        })
      }

    }
  },
  created() {

  },
  mounted() {

  }
}
</script>
<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 140px); /* 减去顶部菜单的高度 */
  padding-bottom: 70px;
}

.login-form {
  padding: 20px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  width: 300px;
}

.login-form h2 {
  text-align: center;
  margin-bottom: 20px;
}
.el-button {
  width: 100%;
  margin-top: 10px;
}

.el-input {
  margin-bottom: 10px;
}

.form-button {
  text-align: center; /* 使按钮居中 */
}
</style>